import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { QueryClient, QueryClientProvider } from 'react-query';
import { Button } from 'antd-mobile';

// 布局组件
import Layout from '@/components/Layout';

// 页面组件
import Home from '@/pages/Home';
import Products from '@/pages/Products';
import ProductDetail from '@/pages/ProductDetail';
import Cart from '@/pages/Cart';
import Orders from '@/pages/Orders';
import Profile from '@/pages/Profile';
import Login from '@/pages/Login';
import Register from '@/pages/Register';
import FarmerCenter from '@/pages/FarmerCenter';
import AIServices from '@/pages/AIServices';
import Knowledge from '@/pages/Knowledge';

// 样式
import '@/styles/global.css';

// 创建React Query客户端
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      refetchOnWindowFocus: false,
      staleTime: 5 * 60 * 1000, // 5分钟
    },
  },
});

const App: React.FC = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <ConfigProvider
        locale={zhCN}
        theme={{
          token: {
            colorPrimary: '#52c41a',
            borderRadius: 6,
          },
        }}
      >
        <Router>
          <Routes>
            {/* 公开路由 */}
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />
            
            {/* 需要布局的路由 */}
            <Route path="/" element={<Layout />}>
              <Route index element={<Home />} />
              <Route path="products" element={<Products />} />
              <Route path="products/:id" element={<ProductDetail />} />
              <Route path="cart" element={<Cart />} />
              <Route path="orders" element={<Orders />} />
              <Route path="profile" element={<Profile />} />
              <Route path="farmer" element={<FarmerCenter />} />
              <Route path="ai-services" element={<AIServices />} />
              <Route path="knowledge" element={<Knowledge />} />
            </Route>
          </Routes>
        </Router>
        <div style={{ padding: 24 }}>
          <h1>欢迎使用助农平台</h1>
          <Button color='primary'>Antd Mobile 按钮示例</Button>
        </div>
      </ConfigProvider>
    </QueryClientProvider>
  );
}

export default App; 